<template>
  <div class="indicators">
    <div class="title">近三年项目相关指标情况</div>
    <NumberCard title="2020年指标" percentage="7.31" :rose="true" number="11.5610" color="#269bff"></NumberCard>
    <NumberCard title="2021年指标" percentage="8.37" :rose="true" number="12.5289" color="#00feff"></NumberCard>
    <NumberCard title="2022年指标" percentage="9.30" :rose="false" number="13.6944" color="#f8cf11"></NumberCard>
  </div>
</template>

<script>
import NumberCard from "@/components/NumberItem/NumberCard.vue";

export default {
  name: "Indicators",
  components: {NumberCard},

}
</script>

<style scoped lang="scss">
.indicators {
  width: 100%;
  height: 100%;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title {
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    height: 40px;
  }

}
</style>
